<template>
  <div class="card-box">
    <div ref="chart" style="height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chart: null,
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              rotate: 45, // 旋转角度
              fontSize: 12 // 字体大小
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '非遗',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      }
    }
  },
  props: {
    cultureCategoryData: {
      type: Array,
      required: true,
      default: []
    }
  },
  mounted() {
    this.initChart();
  },
  watch: {
    cultureCategoryData: {
      immediate: true,
      handler(newVal) {
        console.log(newVal)
        if (newVal) {
          if (newVal.length !== 0) {
            this.option.xAxis[0].data = this.cultureCategoryData.map(item => item.dictLabel)
            this.option.series[0].data = this.cultureCategoryData.map(item => item.cultureCategoryCount)
            this.chart.setOption(this.option);
            console.log(this.option)
          }
        } else {
          console.log('数据尚未准备好');
        }
      }
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
    }
  }
};
</script>
<style>
canvas {
  width: 100% !important;
}

.card-box div:first-child {
  width: 100% !important;
}
</style>
